<script setup lang="ts">
import pageHeader from "./components/pageHeader.vue";
import cardHeader from "./components/card_header.vue";
import baseService from "@/service/baseService";
import {onBeforeMount, reactive} from "vue";

const dataArr = reactive({}) as any;

const getDataList = () => {
  baseService.get("/bus/busmoment/page", {page: 1, limit: 50, type: "xqq", isPublish: 1}).then((res) => {
    dataArr["xqq"] = res.data.list;
  });
  baseService.get("/bus/busadressbook/page", {page: 1, limit: 50}).then((res) => {
    dataArr["busadressbook"] = res.data.list;
  });

};

onBeforeMount(() => {
  getDataList();
});
</script>

<template>
  <!--生活塍里-->
  <div class="mod-out-home">
    <pageHeader></pageHeader>
    <div class="max_screen_body">
      <div class="liv_home_box_left">
        <card-header :title="'便民通讯录'" :path="'screen/card_header6.png'"></card-header>
        <div class="screen_card_body screen_card_body22">
          <div class="my_img_box" v-scroll>
            <div class="table_item" style="font-weight: 500">
              <div class="table-item-left">姓名</div>
              <div class="table-item-center">部门</div>
              <div class="table-item-center">职务</div>
              <div class="table-item-right">联系方式</div>
            </div>
            <div class="table_item" v-for="(item,index) in dataArr['busadressbook']" :key="item.id">
              <div class="table-item-left">{{ item.name }}</div>
              <div class="table-item-center">{{ item.deptName }}</div>
              <div class="table-item-center">{{ item.jobName }}</div>
              <div class="table-item-right">{{ item.mobile }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="liv_home_box_right">
        <card-header :title="'乡情圈'" :path="'screen/card_header7.png'"></card-header>
        <div class="screen_card_body">
          <div class="auto_box" v-scroll="100">
            <div class="auto_box_item" v-for="item in dataArr['xqq']" :key="item.id">
              <div class="left_box">
                <img src="@/assets/images/screen/ava3.png" alt=""/>
              </div>
              <div class="right_box">
                <div class="user_name">村民</div>
                <div class="user_time">{{ item.createDate }}</div>
                <div class="user_desc">
                  {{ item.content }}
                </div>
                <div class="user_img">
                  <el-image class="my_img" v-for="(ite, index) in item.photo.split(',')" :key="index + '_key2'"
                            :src="'https://' + ite"
                            :preview-src-list="[...item.photo.split(',').map((ie:any) => 'https://' + ie)]"
                            :initial-index="index" fit="cover"/>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.max_screen_body {
  .screen_card_body {
    background: #112a38;
    height: 86.6vh;
    padding: 2.2vh 2.2vw;

    .auto_box {
      width: 100%;
      height: 100%;
      overflow: auto;
    }

    .my_img_box {
      width: 100%;
      height: 81.5vh;
      //border: 0.1vw solid #1aa6f2;
      overflow: auto;
    }

    .my_img_box::-webkit-scrollbar {
      display: none; /* Chrome Safari */
    }

    .auto_box_item {
      background: #121f2e;
      display: flex;
      align-items: flex-start;
      padding: 2.5vh 2.5vw;
      margin-bottom: 1.5vh;

      .left_box {
        width: 3.3vw;
        height: 5.9vh;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 1vw;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .right_box {
        color: #ffffff;
        flex: 1;

        .user_name {
          font-size: 0.9vw;
          margin-bottom: 1.5vh;
        }

        .user_time {
          font-size: 0.6vw;
          opacity: 0.7;
          margin-bottom: 1.5vh;
        }

        .user_desc {
          font-size: 0.8vw;
          margin-bottom: 1.5vh;
          line-height: 1.6;
        }

        .user_img {
          .my_img {
            width: 11vw;
            height: 14.9vh;
            margin-right: 0.8vw;
            margin-bottom: 1vh;
          }
        }
      }
    }
  }

  .liv_home_box_left {
    width: 41.2vw;
  }

  .liv_home_box_right {
    width: 55.8vw;
  }

  .table_item {
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 0.9vw;
    color: #ffffff;
    padding: 3vh 0.3vw;
    border-radius: 0.2vw;
    border-bottom: 2px dashed #134552;
    text-align: center;

    & > div {
      flex: 1;
    }
  }

  .table-item-left {
    max-width: 50%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  //.table_item:nth-child(2n + 2) {
  //  background: rgba(185, 185, 185, 0.1);
  //}
}

.screen_card_body22 {
  //background: #FFFFFF !important;
}
</style>
